﻿@page "/DropDown-List/Default-Functionalities"

@using Syncfusion.Blazor.DropDowns
@using Newtonsoft.Json
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the default functionalities of the DropDownList in Blazor application. Click the DropDownList element and select an item from the <code>options</code> list.</p>
</SampleDescription>
<ActionDescription>
   <p>The <code>DropDownList</code> component contains a list of predefined values from that the user can choose a single value.</p>
   <p>The default sample illustrates the use of DropDownList that allows the end-users to select an item from the <code>options</code> list.</p>
   <p>More information on the DropDownList instantiation can be found in the <a href='https://blazor.syncfusion.com/documentation/dropdown-list/getting-started/' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-8 control-section sb-property-border dropdown-height">
    <div class="control_wrapper">
        <SfDropDownList TItem="GameFields" TValue="string" PopupHeight="230px"  Placeholder="Select a game" @bind-Value="@DropVal" DataSource="@Games">
            <DropDownListEvents TItem="GameFields" TValue="string" ValueChange="OnChange"></DropDownListEvents>
            <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
        </SfDropDownList>
    </div>
</div>
<div class="col-lg-4 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table id="property" title="Properties">
                <tr>
                    <td class="left-side">Value</td>
                    <td>:<span id='value' class="right-side">@DropVal</span></td>
                </tr>
                <tr>
                    <td class="left-side">Text</td>
                    <td>:<span id='text' class="right-side">@ChangeValue</span></td>
                </tr>
            </table>
        </div>
    </div>
</div>

<style>
    .control_wrapper {
        width: 250px;
        margin: 0 auto;
        padding-top: 70px;
    }

    .property-section .right-side {
        padding-left: 10px;
    }

    .property-section .left-side {
        padding: 5px;
        width: 25%
    }

    .dropdown-height {
        min-height: 365px;
    }

    #property {
        width: 100%;
        margin: 10px
    }
</style>

@code{

    private string textValue { get; set; }
    public class GameFields
    {
        public string ID { get; set; }

        public string Text { get; set; }
    }

    private List<GameFields> Games = new List<GameFields>() {
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
        new GameFields(){ ID= "Game5", Text= "Football" },
        new GameFields(){ ID= "Game6", Text= "Golf" },
        new GameFields(){ ID= "Game7", Text= "Hockey" },
        new GameFields(){ ID= "Game8", Text= "Rugby"},
        new GameFields(){ ID= "Game9", Text= "Snooker" },
        new GameFields(){ ID= "Game10", Text= "Tennis"},
     };
    public string DropVal = "Game3";
    public string ChangeValue { get; set; } = "Basketball";

    public void OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, GameFields> args)
    {
        this.ChangeValue = args.ItemData.Text;
    }
}
